<template>
    <div>
        <van-nav-bar title="首页" />
        <van-search v-model="value" shape="round" background="pink" placeholder="请输入搜索关键词" />
        <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
                <img :src="image" style="width: 100%;height: 200px;" />
            </van-swipe-item>
        </van-swipe>

        <van-grid :column-num="4">
            <van-grid-item v-for="item in dh" :icon="item.image_src" :text="item.name" />
            <van-grid-item v-for="item in dh" :icon="item.image_src" :text="item.name" />
        </van-grid>
        <div class="box">
            <p>
            <h3>秒杀专场 <a href="">更多</a></h3>
            <span>10</span>:<span>48</span>:<span>23</span>
            
            </p>
           
        </div>

        <div class="box1">
            <dl>
                <dt>
                    <img src="../views/img/1.png" alt="">
                </dt>
                <dd><b>￥230</b></dd>
            </dl>
            <dl>
                <dt>
                    <img src="../views/img/1.png" alt="">
                </dt>
                <dd><b>￥230</b></dd>
            </dl>
            <dl>
                <dt>
                    <img src="../views/img/1.png" alt="">
                </dt>
                <dd><b>￥230</b></dd>
            </dl>
            <dl>
                <dt>
                    <img src="../views/img/1.png" alt="">
                </dt>
                <dd><b>￥230</b></dd>
            </dl>
            <dl>
                <dt>
                    <img src="../views/img/1.png" alt="">
                </dt>
                <dd><b>￥230</b></dd>
            </dl>
            <dl>
                <dt>
                    <img src="../views/img/1.png" alt="">
                </dt>
                <dd><b>￥230</b></dd>
            </dl>
        </div>
    </div>
</template>

<script setup>
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-4.jpeg',
];

import { catitemsApi } from '@/api/api';
import { ref } from 'vue';

let dh = ref([]);
catitemsApi().then(res => {
    console.log(res);
    dh.value = res.data.message;

})
</script>

<style lang="scss" scoped>
.box {
    span {
        width: 30px;
        height: 30px;
        background-color: orange;
        border: none;
    }
    a{
        float: right;
        margin-top: 1px;
    }

}

.box1 {
    dd {
        margin-left: 0px;
        color: pink;
    }

    dl {
        float: left;
        margin-left: 10px;
    }
}
</style>